<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/coolblue.css' />" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script>
// make sure jquery is loaded locally if not avialbe online
if(!window.jQuery){
    document.write('<script src="<c:url value='/resources/js/jquery-1.9.1.min.js' />"><\/script>');
}
</script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"> </script>
<script>
// make sure ajaxform plugin is loaded locally if not available online
	if(! jQuery.ajaxForm){
	    document.write('<script src="<c:url value='/resources/js/jquery.form.js' />"><\/script>');
	}
</script>
<script type="text/javascript">

$(document).ready(function() {
	var contextPath = "<%=request.getContextPath()%>";
	
	   // hide the form and show the upload file button
    $('#uploadform').hide();
    $('#showForm').show();
    
    // when upload file button is clicked, hide the button and show the form
    $('#showForm').click(function(){
        $(this).hide();
        $('#uploadform').show();
    });
    
    // this is a function that makes an ajax request when form is submitted
    $('#uploadform').ajaxForm(function(response) {
        // reset fields of the form
        $('#uploadform').trigger('reset');
        // hide the form
        $('#uploadform').hide();
        // show upload file button
        $('#showForm').show();
        // show the uplaoded media on top
        $('#media').prepend(response);
    }); 
	
	
	// once we visit first time, we will render list of media
	var mediaDiv = $("#media");
    $.ajax({
        url: contextPath + "/fetchMedia"
    }).done(function(response) {
        mediaDiv.html(response);
    });
    
    
});
</script>
<title>Profile</title>
</head>
<body>
    <div id="content-wrap">

        <!-- content -->
        <div id="content" class="clearfix">
            <%@ include file="./common.jsp" %>
            <div id="main">
                <div id = "userprofile">                
                    Full Name: ${myprofile.firstName}  ${myprofile.lastName}</br>
                    Age: ${myprofile.age}       </br>
                    Home Resort: Buck Hill  </br>
                    Crew: Wild Animals          </br>
                    Favorite Trick: Inversions  </br>
                    Board Setup: Regular Forward</br>
                    Ride Times This Season: 20  </br>
                </div>
                <button id="showForm"> upload file </button>
                <br>
                <form action="save" id="uploadform" method="post" enctype="multipart/form-data">
                    Title: <input type="text" name="title"/> </br>
                    Tag:   <input type ="text" name="tag" /> </br>
                    Files: <input type="file" name="files[]" multiple="multiple" />
                    <input type="submit" value="post" name="upload" id = upload" />
                </form>
                <div id='media'>
                </div>
			</div>
		</div>
	</div>
</body>
</html>

